<template>
  <div class="list">
    <van-nav-bar title="水果商城" />
    <van-search
      v-model="key"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      style="width: 96%; margin: auto"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="list-box">
      <div style="width: 20%">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item"
            v-for="(item, index) in menuList"
            :key="index"
            @click="onMenuList(index)"
          />
        </van-sidebar>
      </div>
      <div style="width: 80%" class="goods-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="goods-img"
          @click="clickDetail(item)"
        >
          <img :src="item.goodsImg" alt="" />
          <div class="goods-info">
            <div class="goods-name" style="margin-top: 15px">
              {{ item.goodsName }}
            </div>
            <div
              class="goods-name"
              style="font-size: 12px; color: rgb(147, 147, 147)"
            >
              {{ item.slogan }}
              &nbsp;
            </div>
            <div class="goods-name" style="font-size: 12px">
              <span style="color: rgb(255, 136, 0)">自营 </span> &nbsp;
              <span style="background: rgb(255, 136, 0); border-radius: 5px"
                >次日达
              </span>
              &nbsp;
              <span style="color: rgb(175, 82, 239)">深圳平湖仓 </span>
            </div>
            <div class="price-cart">
              <span>{{ item.mallPrice }}</span>
              <van-icon name="cart-o" size="30" color=" rgb(255, 136, 0)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { checkLikeList } from "../common/Api/index.js";
export default {
  data() {
    return {
      key: "",
      // list: JSON.parse(sessionStorage.getItem("list")),
      list: [],
      activeKey: 0,
      menuList: [
        "全部",
        "奇异果/车厘子",
        "苹果/梨子/瓜类",
        "提子/葡萄/莓类",
        "橙桔柑柚",
        "热门水果",
      ],
      pagnum: 1,
      limit: 100,
    };
  },
  mounted() {
    this.checkLike();
  },
  methods: {
    onMenuList(index) {
      console.log(index);
      if (index == 0) {
        this.pagnum = 1;
        this.limit = 100;
      } else if (index == 1) {
        this.pagnum = 3;
        this.limit = 20;
      } else if (index == 2) {
        this.pagnum = 4;
        this.limit = 20;
      } else if (index == 3) {
        this.pagnum = 1;
        this.limit = 20;
      } else if (index == 4) {
        this.pagnum = 3;
        this.limit = 20;
      } else if (index == 5) {
        this.pagnum = 2;
        this.limit = 20;
      }
      this.checkLike();
    },
    checkLike() {
      checkLikeList({
        key: this.key,
        pagnum: this.pagnum,
        limit: this.limit,
      }).then((res) => {
        this.list = [];
        this.list = res.records;
      });
    },
    clickDetail(item) {
      this.$router.push("detail");
      sessionStorage.setItem("detail", JSON.stringify(item));
      sessionStorage.setItem("active", JSON.stringify("list"));
    },
    onSearch() {
      this.checkLike();
    },
  },
};
</script>
<style scoped  lang="scss">
.list-box {
  display: flex;
  .goods-list {
    height: 80vh;
    overflow-x: scroll;
    background: #fff;
    .goods-img {
      display: flex;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .goods-info {
      width: 65%;
      .goods-name {
        font-size: 14px;
        padding: 2px 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price-cart {
        padding: 0 13px;
        background: #fff;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(255, 136, 0);
          font-size: 16px;
        }
      }
    }
  }
}
</style>